<style>
.modal_charge{width:730px; padding:20px;}
.modal_chargememberinfo{ border:1px solid #CCC; border-radius:4px;}
.modal_chargememberinfo .jrow{ border-bottom:1px solid #CCC;display:-webkit-box;display:box; padding:0 10px;}
.modal_chargememberinfo .jrow:last-child{ border-bottom:none;}
.modal_chargememberinfo .jrow div{ line-height:30px; padding:5px 0;}
.modal_chargememberinfo .jrow .flex1{-webkit-box-flex:1;box-flex:1;}
.modal_chargememberinfo .jrow .flex2{-webkit-box-flex:2;box-flex:2;}
.modal_chargememberinfo .jrow .flex6{-webkit-box-flex:6;box-flex:6;}
.modal_chargememberinfo .jrow .flex8{-webkit-box-flex:8;box-flex:8;}
.modal_chargememberinfo .jrow .flex10{-webkit-box-flex:10;box-flex:10;}
.modal_chargememberinfo .jrow label{ display:inline-block; margin-right:10px;}
.modal_chargepaytype{ padding:15px 0; }
.modal_chargepaytype .layui-form-radio{ padding-right:0}
.modal_chargefeebox input{ border:1px solid #CCC; background:#FFF; width:100%; font-size:16px; height:40px; border-radius:4px; padding:5px 10px; display:block; margin:0 0 10px 0}
.modal_chargefun span{display:inline-block;width:24.5%;margin:0 0 10px 0; text-align:center;}
.modal_chargefun span a{ display:block; text-align:center; padding:5px 0; border-radius:4px; border:1px solid #CCC; margin:0 3px; background:#FFF; color:#000; font-size:80%;}
.modal_chargefun span.isselect a{ border-color:#90b82d; background:#90b82d; color:#FFF;}
.modal_chargebtn{background:#DDD;-webkit-display:flex;display:flex;flex-direction:row;flex-wrap:wrap; padding:5px; position:relative}
.modal_chargebtn a{display: inline-block;}
.modal_chargebtn .btn0{width:70px; height:50px; border:1px solid #CCC; margin:5px 3px; background:#FFF; font-size:26px; text-align:center; vertical-align:middle; border-radius:4px; line-height:50px;}
.modal_chargebtn .btn1{ background:#50a4ec; color:#FFF;}
.modal_chargebtn .btn2{ background:#1bb987; color:#FFF; line-height:34px; padding-top:50px; height:170px; position:absolute; top:66px; right:5px;}
.modal_chargebtn .btn3{ margin-right:82px;}
.modal_chargebtn .btn4{ width:150px}
.modal_chargefoot{ padding:20px; text-align:right;}
.modal_chargefoot .layui-form-switch{ margin-top:0; font-size:16px;}
</style>
<div class="modal_charge" style="display:none">

  <div class="row">
      <div class="col-sm-6">
      	  <form class="layui-form" onsubmit="return false;" action="">
          <div class="modal_chargememberinfo">
              <div class="jrow">
                  <div class="flex2" onclick="modal_showInputbox()"><span><i class="fa fa-barcode"></i></span></div>
                  <div class="flex8"><input type="text" id="modal_chargesearchtxt" style="background:none;border:none; width:100%; height:30px; font-size:16px; color:#999" maxlength="20" placeholder="刷卡或者输入卡号"/></div>
                  <div class="flex2" onclick="modal_chargesearch();"><span><i class="fa fa-search"></i></span></div>
              </div>
              <div class="jrow">
                  <div class="flex6" style="max-width:154px; min-width:154px;"><label>姓名</label><span id="c_realname"></span></div>
                  <div class="flex6" style="max-width:154px;min-width:154px;"><label>电话</label><span id="c_mobile"></span></div>
              </div>
              <div class="jrow">
                  <div class="flex6" style="max-width:154px;min-width:154px;"><label>余额</label><span id="c_cash">0</span></div>
                  <div class="flex6" style="max-width:154px;min-width:154px;"><label>积分</label><span id="c_credit">0</span></div>
              </div>
          </div>
          <input type="submit" style="display:none;" onclick="modal_chargesearch();" />
          </form>
          
          <form class="layui-form" id="form_charge" onsubmit="return false;" action="">
          <input type="hidden" name="c_memberid" id="c_memberid" />
          <input type="hidden" name="c_paytype1" id="c_paytype1" value="2" />
          <input type="hidden" name="c_print1" id="c_print1" value="1" />
          <input type="hidden" name="c_qrcode" id="c_qrcode" />
          
          <div class="modal_chargepaytype">
          	<input type="radio" name="c_paytype" id="c_paytype" lay-filter="c_paytype" value="2" title="现金" checked/>
            <input type="radio" name="c_paytype" id="c_paytype" lay-filter="c_paytype" value="3" title="银行卡" />
            <input type="radio" name="c_paytype" id="c_paytype" lay-filter="c_paytype" value="0" title="微信" />
            <input type="radio" name="c_paytype" id="c_paytype" lay-filter="c_paytype" value="1" title="支付宝" />
          </div>
          <div class="modal_chargefeebox">
          	<input type="text" name="c_inputcash" id="c_inputcash" onchange="funExtend_chargeCountPay()" onkeyup="funExtend_chargeCountPay()" placeholder="请输入充值金额，单位：元"/>
            <input type="text" name="c_gift" id="c_gift" placeholder="赠送金额" readonly/>
          </div>
          </form>
      </div>
      <div class="col-sm-6">
      	<div class="modal_chargefun"></div>
        <div class="modal_chargebtn">
        	<a href="#" class="btn0">7</a>
            <a href="#" class="btn0">8</a>
            <a href="#" class="btn0">9</a>
            <a href="#" class="btn0 btn1"><i class="fa fa-remove-sign"></i></a>
            <a href="#" class="btn0">4</a>
            <a href="#" class="btn0">5</a>
            <a href="#" class="btn0 btn3">6</a>
            <a href="#" class="btn0">1</a>
            <a href="#" class="btn0">2</a>
            <a href="#" class="btn0 btn3">3</a>
            <a href="#" class="btn0 btn4">0</a>
            <a href="#" class="btn0">.</a>
            <a href="#" class="btn0 btn2">确<br>认</a>
        </div>
      </div>
  </div>
   <form class="layui-form" onsubmit="return false;" action="">
  <div class="modal_chargefoot">打印充值小票 <input type="checkbox" checked lay-filter="c_print" name="c_print" id="c_print" lay-skin="switch" value="1" lay-text="ON|OFF"></div>
</form>
</div>
<script language="javascript">
function modal_showInputbox(){
	layer.open({
		type: 1,
		title:"输入卡号",
		area:'320px',
		skin: 'layui-layer-rim',
		content:$(".modal_counter").show(),
		success: function(layero, index){
			$("#modal_doc").hide();
			$('#moadConterInput').val('');
			$("#modal_cantrl").on("click",function(){
				layer.close(index);
			});
			$("#modal_sure").on("click",function(){
				if($('#moadConterInput').val().length==0){
					layer.msg("请输入卡号",{icon:2,time:2000});
					return;
				}
				$("#modal_chargesearchtxt").val($('#moadConterInput').val());
				layer.close(index);
			});
		},
		end:function(){
			$(".modal_counter").hide();
			$("#modal_cantrl").unbind("click");
			$("#modal_sure").unbind("click");
		}
	});
}
function modal_chargesearch(){
	if(!$("#modal_chargesearchtxt").val())return false;;
	var keyword=$("#modal_chargesearchtxt").val();
	if(!keyword){
		layer.msg("请输入卡号或者电话号码",{icon:2,time:2000},function(){$("#modal_chargesearchtxt").focus()});
		return false;
	}
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	$.post("{php echo $this->createMobileUrl('index',array('op'=>'getmember'))}",{keyword:keyword},function(returnstr){
		layer.close(index2);
		console.log(returnstr);
		var result=eval("("+returnstr+")");
		if(!result.success){
			layer.msg(result.msg,{icon:2,time:1000});
			return false;
		}
		var member=result.member;
		var cost=result.cost;
		$("#c_memberid").val(member.id);
		$("#c_realname").text(member.realname);
		$("#c_mobile").text(member.mobile);
		$("#c_credit").text(member.credit2);
		$("#c_cash").text(member.cash2);
		return false;
	});
	return false;
}
function funExtend_charge(){
	if(arguments[0])$("#modal_chargesearchtxt").val(arguments[0]);
	layer.open({
		type: 1,
		title:0,
		area:"760px",
		skin: 'layui-layer-rim',
		content:$(".modal_charge").show(),
		success: function(layero, index){
			$("#form_charge")[0].reset();
			$("#c_memberid").val('');
			$("#c_realname").text('');
			$("#c_mobile").text('');
			$("#c_credit").text('');
			$("#c_cash").text('');
			var chargelist=eval('({$shop["chargelist"]})');
			$(".modal_chargefun").empty();
			if(chargelist){
				for(var i in chargelist){
					var temp='<span cash="'+i+'" gift="'+chargelist[i]+'" ><a href="#">'+i+'<br>送<br>'+chargelist[i]+'</a></span>';
					$(".modal_chargefun").append(temp);
				}
			};
			$(".modal_chargefun span").bind("click",function(){
				$(this).addClass("isselect").siblings().removeClass("isselect");
				$("#c_inputcash").val($(this).attr("cash"));
				$("#c_gift").val($(this).attr("gift"));
			});
			$(".modal_chargebtn .btn0").bind("click",function(){
				if($(this).hasClass("btn1")){
					Counter("C","#c_inputcash");
					$("#c_gift").val("");
				}else if($(this).hasClass("btn2")){
					funExtend_chargepay();
				}else{
					Counter($(this).text(),"#c_inputcash");
					var fee=parseFloat($("#c_inputcash").val());
					var gift="";
					if(chargelist){
						for(var i in chargelist){
							if(fee>=parseFloat(i)){
								gift=chargelist[i];
							}else{
								break;
							}
						}
					};
					$("#c_gift").val(gift);
				}
			})
			if(arguments[0])modal_chargesearch();
		},
		end:function(){
			$(".modal_charge").hide();
			$(".modal_chargefun span").unbind("click");
			$(".modal_chargebtn .btn0").unbind("click");
		}
	});
}
function funExtend_chargeCountPay(){
	var fee=parseFloat($("#c_inputcash").val());
	if(isNaN(fee)){
		var t=$("#c_inputcash").val();
		t.substring(0,t.length-1);
		$("#c_inputcash").val(t);
	}
	fee=parseFloat($("#c_inputcash").val());
	var gift;
	var chargelist=eval('({$shop["chargelist"]})');
	if(chargelist){
		for(var i in chargelist){
			if(fee>=parseFloat(i)){
				gift=chargelist[i];
			}else{
				break;
			}
		}
	};
	$("#c_gift").val(gift);
}
function funExtend_chargepay(){
	var memberid=$("#c_memberid").val();
	if(!memberid){
		layer.msg("请先选择会员",{icon:2,time:2000},function(){$("#modal_chargesearchtxt").focus()});
		return false;
	}
	var cash=$("#c_inputcash").val();
	if(!cash){
		layer.msg("请输入充值金额",{icon:2,time:2000},function(){$("#modal_chargesearchtxt").focus()});
		return false;
	}
	var gift=$("#c_gift").val();
	var paytype=$("#c_paytype1").val();
	var printtype=$("#c_print1").val();
	var qrcode=$("#c_qrcode").val();
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	var data={
		"memberid":memberid,
		"cash":cash,
		"gift":gift,
		"paytype":paytype,
		"printtype":printtype,
		"qrcode":qrcode
	};
	$.post("{php echo $this->createMobileUrl('member',array('op'=>'memberpay'))}",data,function(returnstr){
		layer.close(index2);
		console.log(returnstr);
		var result=eval("("+returnstr+")");
		if(result.success){
			if(result.paywait){
				layer.alert('请稍等，需要用户支付密码<br>如果长时间没有支付，可取消支付', {
					skin: 'layui-layer-molv'
					,icon: 1
					,closeBtn: 0
					,title:0
					,btn:['取消订单']
				}, function(){
					layer.msg('请稍等，等待用户输入密码<br>如果长时间没有支付，可取消支付', {
						skin: 'layui-layer-molv'
						,icon:0
						,shade: 0.1
						,time:15000
					}, function(){
						  layer.alert('请稍等，需要用户支付密码<br>如果长时间没有支付，可取消支付', {
							  skin: 'layui-layer-molv'
							  ,icon: 0
							  ,closeBtn: 0
							  ,title:0
							  ,btn:['取消订单']
						  },function(){
							  layer.confirm('确认撤销此订单？', {
								  btn: ['确认','关闭']
							  }, function(){
								  $.post("{php echo $this->createMobileUrl('member',array('op'=>'reversepay'))}",{"pid":result.pid},function(returnstr){
									   if(returnstr.success){
										   layer.closeAll();
										   clearTimeout(waitforpassword);
										   $("#listform")[0].reset();
										   $("#txt_total").text("￥0.00");
									   }else{
										   layer.msg(result.msg,{icon:2,time:2000});
									   }
								  },'json');
							  });
							   
						  });
					});
				});
				waitforpassword=setTimeout(function(){funExtend_chargewaitForPass(result.pid)},4000);
				return false;
			}
			layer.msg("充值成功",{icon:1,time:2000},function(){
				funExtend_chargesuccess(result.pid);
				fun_modalgetmember(memberid);
			});
		}else{
			layer.msg(result.msg ? result.msg : returnstr,{icon:2,time:2000});
			return;
		}
	});
	return false;
}
function funExtend_chargewaitForPass(pid){
	clearTimeout(waitforpassword);
	$.post("{php echo $this->createMobileUrl('member',array('op'=>'waitforpass'))}",{"pid":pid},function(returnstr){
		var result=eval("("+returnstr+")");
		if(result.success){
			if(result.paywait){
				waitforpassword=setTimeout(function(){funExtend_chargewaitForPass(pid)},4000);
				return;
			}
			layer.msg("充值成功",{icon:1,time:2000},function(){
				funExtend_chargesuccess(pid);
				fun_modalgetmember(memberid);
			});
		}else{
			layer.msg(result.msg ? result.msg : returnstr,{icon:2,time:2000});
			return;
		}
		
	});
}
function fun_modalgetmember(id){
	$("#form_charge")[0].reset();
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	$.post("{php echo $this->createMobileUrl('index',array('op'=>'getmember'))}",{memberid:id},function(returnstr){
		layer.close(index2);
		console.log(returnstr);
		var result=eval("("+returnstr+")");
		if(!result.success){
			layer.msg(result.msg,{icon:2,time:1000});
			return false;
		}
		var member=result.member;
		var cost=result.cost;
		$("#c_memberid").val(member.id);
		$("#c_realname").text(member.realname);
		$("#c_mobile").text(member.mobile);
		$("#c_credit").text(member.credit);
		$("#c_cash").text(member.cash2);
		return false;
	});
}
function funExtend_chargesuccess(pid){
	var isprint=parseInt($(".modal_chargefoot .layui-form-onswitch").size());
	if(isprint)fun_print(4,pid);
}
layui.use(['layer','form'], function(){
	var layer = layui.layer
	,form = layui.form;
	form.on('switch(c_print)', function(data){
		var val=data.elem.checked ? 1:0;
		$("#c_print1").val(val);
	});
	form.on('radio(c_paytype)', function(data){
		$("#c_paytype1").val(data.value);
		if(parseInt(data.value)==0 || parseInt(data.value)==1){
			layer.open({
				type:1,
				title:"请扫描客户钱包中的付款码",
				shade: [0.1,'#fff'],
				area:'300px',
				skin: 'layui-layer-rim',
				content:$(".modal_inputbox").show(),
				success: function(layero, index){
					$("#modal_inputboximg").show();
					$("#modal_inputboximg .help-block").text("请扫描客户钱包中的付款码");
					$("#modal_inputbox").val('').attr("placeholder","请扫描客户钱包中的付款码");
					$("#modal_inputboxbtn").bind("click",function(){
						var qrcode=$("#modal_inputbox").val();
						if(!qrcode){
							layer.msg("请扫描客户钱包中的二维码",{icon:2,time:1500});
							return false;
						}
						$("#c_qrcode").val(qrcode);
						layer.close(index);
						return false;
					});
					return false;
				},
				end:function(){
					$(".modal_inputbox").hide();
					$("#modal_inputboxbtn").unbind();
				}
			});
		}
	});  
});

</script>